import { requireNativeView } from 'expo';
import { ColorValue } from 'react-native';

import { createViewModifierEventListener } from '../modifiers/utils';
import { type CommonViewModifierProps } from '../types';

/**
 * The type of `Gauge`.
 */
export type GaugeType = 'default' | 'circular' | 'circularCapacity' | 'linear' | 'linearCapacity';

/**
 * Value options for the `Gauge` component.
 */
export type ValueOptions = {
  /**
   * Value of the element.
   */
  value: number;
  /**
   * Label of the element.
   */
  label?: string;
  /**
   * Color of the label.
   */
  color?: ColorValue;
};

export type GaugeProps = {
  /**
   * A label displayed on the `Gauge`.
   */
  label?: string;
  /**
   * Color of the label.
   */
  labelColor?: ColorValue;
  /**
   * Current value options.
   */
  current: ValueOptions;
  /**
   * Minimum value options.
   */
  min?: ValueOptions;
  /**
   * Maximum value options.
   */
  max?: ValueOptions;
  /**
   * The type of `Gauge`.
   */
  type?: GaugeType;
  /**
   * Color (or array of colors for gradient) of the `Gauge`.
   */
  color?: ColorValue | ColorValue[];
} & CommonViewModifierProps;

const GaugeNativeView: React.ComponentType<GaugeProps> = requireNativeView('ExpoUI', 'GaugeView');

/**
 * Renders a native `Gauge` component.
 * @platform ios 16.0+
 */
export function Gauge({ type = 'default', modifiers, ...props }: GaugeProps) {
  return (
    <GaugeNativeView
      modifiers={modifiers}
      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
      type={type}
      {...props}
    />
  );
}
